<template>
	<view class="bubble" :class="tailDirection" :style="{'--tail-color':backgroundColor}">
		<text class="content" :style="{'background-color': backgroundColor,'color':fontColor}">{{text}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			// 气泡的尾巴朝向 left:左 right:右
			tailDirection: {
				type: String,
				default: 'left'
			},
			// 气泡的背景颜色
			backgroundColor: {
				type: String,
				default: '#ffffff'
			},
			// 气泡的字体颜色
			fontColor: {
				type: String,
				default: '#000000'
			},
			// 气泡里面显示的文字
			text: {
				type: String,
				default: ''
			}
		},
		data: {
			contentId: 0,
			contentStyle: {}
		},
	}
</script>

<style lang="scss">
	.bubble {
		display: inline-flex;
		position: relative;
		align-items: center;

		.content {
			// 设置气泡的内间距，让气泡边缘距离文字有一定的距离
			padding: 10px 10px;
			// 设置气泡的边框半径,使边框有弧度
			border-radius: 8px;
			font-family: sans-serif;
			// 解决英文字符串、数字不换行的问题
			word-break: break-all;
			word-wrap: break-word;
		}
	}

	.left {
		margin-left: 5px;
	}

	.right {
		margin-right: 5px;
	}

	.left:before {
		position: absolute;
		content: "\00a0";
		width: 0px;
		height: 0px;
		border-width: 5px 10px 5px 0;
		border-style: solid;
		border-color: transparent var(--tail-color) transparent transparent;
		top: 10px;
		left: -10px;
	}

	.right:before {
		position: absolute;
		content: "\00a0";
		width: 0px;
		height: 0px;
		border-width: 5px 0px 5px 10px;
		border-style: solid;
		border-color: transparent transparent transparent var(--tail-color);
		top: 10px;
		right: -10px;
	}
</style>